<template>
  <div class="app-container">
    <el-button type="primary" plain @click = "add()">新增</el-button>
    <el-input v-model="direction" style="width: 200px; margin-right: 10px; margin-bottom: 5px; margin-left: 50px;" placeholder="搜索" clearable></el-input>
    <el-button type="primary" @click = "search()">搜索</el-button>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">

		<el-table-column width="50px" align="center" label="ID">
		  <template slot-scope="scope">
			<span>{{ scope.row.id }}</span>
		  </template>
		</el-table-column>

    <el-table-column width="110px" align="center" label="业主姓名">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>


    <el-table-column width="110px" align="center" label="头像">
      <template slot-scope="scope">
       <img :src="scope.row.picture" style="width: 100px; height: 100px" class="demo-image" />
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="所属小区">
      <template slot-scope="scope">
        <span>{{ scope.row.tbCommunity.name }}</span>
      </template>
    </el-table-column>

    <el-table-column width="80px" align="center" label="栋数">
      <template slot-scope="scope">
        <span>{{ scope.row.tbBuilding.name }}</span>
      </template>
    </el-table-column>

    <el-table-column width="140px" align="center" label="身份证号">
      <template slot-scope="scope">
        <span>{{ scope.row.idcard }}</span>
      </template>
    </el-table-column>

    <el-table-column width="140px" align="center" label="联系方式">
      <template slot-scope="scope">
        <span>{{ scope.row.telephone }}</span>
      </template>
    </el-table-column>

    <el-table-column width="100px" align="center" label="邮箱">
      <template slot-scope="scope">
        <span>{{ scope.row.email }}</span>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="职业">
      <template slot-scope="scope">
        <span>{{ scope.row.profession }}</span>
      </template>
    </el-table-column>

    <el-table-column width="80px" align="center" label="性别">
      <template slot-scope="scope">
        <span v-if="scope.row.sex == '0'">男</span>
        <span v-if="scope.row.sex == '1'">女</span>
      </template>
    </el-table-column>

    <el-table-column width="80px" align="center" label="类型">
      <template slot-scope="scope">
        <span v-if="scope.row.type == '0'">房主</span>
        <span v-if="scope.row.type == '1'">租客</span>
      </template>
    </el-table-column>



    <el-table-column width="80px" align="center" label="注册日期">
      <template slot-scope="scope">
        <span>{{ scope.row.birthday }}</span>
      </template>
    </el-table-column>


    <el-table-column width="120px" align="center" label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" icon="el-icon-edit" @click="update(scope.row)" circle></el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="delInfo(scope.row)" circle></el-button>
      </template>
    </el-table-column>
   </el-table>

   <!--弹出对话框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
     >
     <el-form ref="form" label-width="80px" >
        <el-form-item label="姓名" >
            <el-input v-model="tbOwner.name"></el-input>
          </el-form-item>
          <el-form-item label="所属小区">
            <input type="hidden" v-model="houseForm.id" />
            <el-cascader
              v-model="handles"
              :options="communities"
              placeholder="请选择所属小区和栋数"
              :props="{value: 'id', label: 'name', children: 'buildings', expandTrigger: 'hover'}"
              @change="handleChange"
              ></el-cascader>
          </el-form-item>
          <el-form-item label="身份证号">
              <el-input v-model="tbOwner.idcard"></el-input>
            </el-form-item>
          <el-form-item label="联系方式">
                <el-input  v-model="tbOwner.telephone"></el-input>
              </el-form-item>
              <el-form-item label="上传图片">
                <el-upload
                        class="avatar-uploader"
                        action="http://192.168.2.72:8080/tb-owner/upload"
                        :auto-upload="autoUpload"
                        name="imgFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="demo-image" style="width: 50px; height: 50px">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          <el-form-item label="邮箱" >
                  <el-input v-model="tbOwner.email"></el-input>
                </el-form-item>
          <el-form-item label="职业">
                  <el-input  v-model="tbOwner.profession"></el-input>
                </el-form-item>
           <el-form-item label="性别" >
              <el-radio-group v-model="tbOwner.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="类型" >
               <el-radio-group v-model="tbOwner.type">
                 <el-radio label="房主"></el-radio>
                 <el-radio label="租客"></el-radio>
               </el-radio-group>
             </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">确 定</el-button>
      </span>
    </el-dialog>


    <!-- page-size 默认每页显示条数 -->
    <div class="block">
        <el-pagination
          @size-change="selectPage"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>


import myUtil from '../../../utils/myUtil'

export default {
  name: 'houseList',
  data() {
    return {
      list: [],
      listLoading: true,
      total: 0, // 总条数
      totalPage: 0, // 总页数
      curPage: 1, // 当前页
      rows: 3 ,// 每页显示条数
      dialogVisible: false, //控制对话框
      title:"" ,//对话框的标题
      direction:"",//搜索条件
      handles:[],
      communities: [],
      autoUpload: true,  //自动上传
      imageUrl: "",
      houseForm:{
        id: null,
        communityName: "",
        communityId: "",
        buildingId: "",
        buildingName: "",
        code: "",
        name: "",
        ownerName: "",
        telephone: "",
        unit: "",
        roomNum: "",
        floor: "",
        liveTime: ""
      },
      tbOwner:{},


    }

  },
  methods: {
    getList() {
      var self = this;
      this.axios({
        methods: 'get',
        url: myUtil.url + '/tb-owner/list',
        params: {
          "currentPage": self.curPage,
          "pageSize": self.rows,
          "direction": self.direction
        }
      }).then(function(rs){
        console.log(rs);
        self.list = rs.data.info;
        self.total = rs.data.total;
        self.totalPage = rs.data.totalPage;
      });
    },
    handleCurrentChange(v){ // 当前页触发事件
      this.curPage = v;
      this.getList();
    },
    selectPage(v) { // 用户选择页数
      this.rows = v;
      this.getList();
    },
    add(){
      //弹出新增框
      this.imageUrl = "";
      this.tbOwner = {};
      this.handles = [];
      this.houseForm.id= null;
      this.title = "新增业主";
      this.getCommunities();
      this.dialogVisible = true;

    },
    getCommunities() {
      var self = this;
      this.axios.get(myUtil.url + "/tb-community/getCWithB")
                .then((rs) => {
                  //console.log(rs);
                  //console.log(rs.data);
                  self.communities = rs.data;
                })
    },
    handleChange(handles) {
          //console.log(handles);
          this.houseForm.communityId = handles[0];
          this.houseForm.buildingId = handles[1];
    },
    saveInfo(){

            if(this.title == "新增业主"){
              this.tbOwner.communityId = this.handles[0];
              this.tbOwner.houseId = this.handles[1];
              console.log(this.handles);
              if(this.tbOwner.sex == "男"){
                this.tbOwner.sex = '0';
              }else{
                this.tbOwner.sex = '1';
              }
              if(this.tbOwner.type == "房主"){
                this.tbOwner.type = '0';
              }else{
                this.tbOwner.type = '1';
              }
              this.axios.post(myUtil.url + '/tb-owner/insert',this.tbOwner).then(res=>{
                if(res.data.info == "添加成功"){
                  this.$message.success(res.data.info);
                  this.dialogVisible = false;
                  this.getList();
                }else{
                  this.$message.error(res.data.info);
                  this.dialogVisible = false;
                }
              })
            }else{
              this.tbOwner.communityId = this.handles[0];
              this.tbOwner.houseId = this.handles[1];
              console.log(this.handles);
              if(this.tbOwner.sex == "男"){
                this.tbOwner.sex = '0';
              }else{
                this.tbOwner.sex = '1';
              }
              if(this.tbOwner.type == "房主"){
                this.tbOwner.type = '0';
              }else{
                this.tbOwner.type = '1';
              }
              this.axios.post(myUtil.url + '/tb-owner/update',this.tbOwner).then(res=>{
                if(res.data.info == "修改成功"){
                  this.$message.success(res.data.info);
                  this.dialogVisible = false;
                  this.getList();
                }else{
                  this.$message.error(res.data.info);
                  this.dialogVisible = false;
                }
              })
            }


    },
    update(row){
      this.getCommunities();
      this.title = "更改业主信息";
      this.imageUrl = row.picture;
      this.axios.get(myUtil.url + '/tb-owner/findById?id='+row.id).then(res=>{
        this.tbOwner=res.data.info;
        if(this.tbOwner.sex == '0'){
          this.tbOwner.sex = "男";
        }else{
          this.tbOwner.sex = "女";
        }
        if(this.tbOwner.type == '0'){
          this.tbOwner.type = "房主";
        }else{
          this.tbOwner.type = "租客";
        }
        this.handles = [row.communityId,row.houseId];
        console.log(this.handles);
      })
      this.dialogVisible = true;

    },
    delInfo(row){
      var id = row.id;
      this.$confirm('此操作将永久删除该业主, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.axios.get(myUtil.url + '/tb-owner/delete?id='+id).then(res=>{
             this.$message({
                         message:res.data.info,
                         type:res.data.info == "删除成功"?"success":"error"
             });
             if (res.data.info == "删除成功"){
                 //刷新列表
                this.curPage = 1;
                this.getList();
             }else{
                 this.$message.error(res.data.info);
             }
          });
      }).catch(() => {
      });
    },
    search(){
      this.curPage = 1;
      this.getList();
    },
    handleAvatarSuccess(res, file){
      if(res.info == "上传成功"){
          // 回显图片
          this.imageUrl = res.domain+res.imgName;
          // 补充formData中的img值，
          this.tbOwner.picture = this.imageUrl;
      }else{
          this.$message.error(res.info);
      }
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
      this.$message.error('上传套餐图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
      this.$message.error('上传套餐图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  },
  mounted() {
    this.getList();
    //console.log(this.$route.query.info);
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
